<template>
  <div class="UCenter">
    <div class="header">
      <div class="left">
        <img src="//yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" />
        <div class="text">
          <div class="uname">用户{{ name }}</div>
          <div class="type">普通用户</div>
        </div>
      </div>
      <div class="right">
        <img class="icon" src="../../../public/2.png" alt="">
        <div class="vip">
          <img src="../../../public/1.png" alt="">
          <div class="vip-text">
            <div>Pro会员</div>
            <div>立即开通</div>
          </div>
        </div>
      </div>
    </div>
    <div class="money">
      <div class="top">我的资产</div>
      <div class="bottom">
        <div class="item">
          <b>￥0</b>
          <div>余额</div>
        </div>
        <div class="item">
          <b>0</b>
          <div>红包</div>
        </div>
        <div class="item">
          <b>0</b>
          <div>优惠券</div>
        </div>
        <div class="item">
          <b>0</b>
          <div>积分</div>
        </div>
        <div class="item">
          <b>0</b>
          <div>礼品卡</div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="item">
        <van-icon name="orders-o" />
        <div class="text">我的订单</div>
      </div>
      <div class="item">
        <van-icon name="user-circle-o" />
        <div class="text">账号管理</div>
      </div>
      <div class="item">
        <van-icon name="phone-circle-o" />
        <div class="text">我的手机号</div>
      </div>
      <div class="item">
        <van-icon name="calendar-o" />
        <div class="text">周六一起拼</div>
      </div>
      <div class="item">
        <van-icon name="after-sale" />
        <div class="text">售后服务</div>
      </div>
      <div class="item">
        <van-icon name="envelop-o" />
        <div class="text">邀请返利</div>
      </div>
      <div class="item">
        <van-icon name="bag-o" />
        <div class="text">优先购</div>
      </div>
      <div class="item">
        <van-icon name="gold-coin-o" />
        <div class="text">积分中心</div>
      </div>
      <div class="item">
        <van-icon name="vip-card-o" />
        <div class="text">会员俱乐部</div>
      </div>
      <div class="item">
        <van-icon name="location-o" />
        <div class="text">地址管理</div>
      </div>
      <div class="item">
        <van-icon name="certificate" />
        <div class="text">支付安全</div>
      </div>
      <div class="item">
        <van-icon name="service-o" />
        <div class="text">帮助与客服</div>
      </div>
      <div class="item">
        <van-icon name="records" />
        <div class="text">意见反馈</div>
      </div>
      <div class="item">
        <van-icon name="records" />
        <div class="text">我的竞拍</div>
      </div>
    </div>
    <van-cell title="退出登录" class="exit" @click="exit"></van-cell>
  </div>
</template>

<script setup>
import { showConfirmDialog } from 'vant';
import { useRouter } from 'vue-router'
import { reqUserLogout } from '../../api/login'
import useLogin from '../../stores/login'
const store = useLogin()
const name=store.name
const token=store.token

const router = useRouter()
const exit = () => {
  showConfirmDialog({
    message:
      '退出登录？',
  })
    .then(async () => {
      // 登出
      const result = await reqUserLogout()
      localStorage.removeItem("name");
      localStorage.removeItem("token");
      router.push("/home");

    })
    .catch(() => { });
}



</script>

<style lang="less" scoped>
.UCenter {
  background-color: #F4F4F4;
  height: 100%;
  overflow: auto;
  .header {
    height: 135px;
    background-image: url(//yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png);
    background-size: 375.2px 135px;
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      img {
        vertical-align: middle;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin: 0 16px;

      }

      .text {
        color: white;

        .uname {
          font-size: 18px;
        }

        .type {
          font-size: 14px;

        }
      }
    }

    .right {
      .icon {
        width: 25px;
        height: 25px;
        margin: 33px 0px 10px 80px;
      }

      .vip {
        width: 110px;
        height: 40px;
        display: flex;
        background-color: #1F1D1A;
        font-size: 12px;
        color: #f9e0c0;
        border-radius: 20px 0 0 20px;
        align-items: center;

        img {
          width: 36px;
          height: 36px;
          margin: 0 5px 0 10px;
        }
      }
    }
  }

  .money {
    background-color: white;
    margin-bottom: 10px;

    .top {
      font-size: 14px;
      line-height: 50px;
      border-bottom: 1px solid #D9D9D9;
      margin-left: 20px;

    }

    .bottom {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding: 20px 0;

      .item {
        b {
          font-size: 16px;
        }

        div {
          font-size: 12px;
        }
      }
    }
  }

  .list {
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;

    .item {
      text-align: center;
      border-right: 1px solid #D9D9D9;
      border-bottom: 1px solid #D9D9D9;
      width: 125px;
      padding: 23px 0;
      box-sizing: border-box;

      .text {
        font-size: 12px;
      }
    }

    .item:nth-of-type(13),
    .item:nth-of-type(14) {
      border-bottom: none;
    }

  }

  .exit {
    height: 50px;
    text-align: center;
    line-height: 30px;
  }
}
</style>

